<template>
  <div v-loading="loading" class="advance-wrapper">
    <div class="searchform">
      <el-form
        ref="modelGroup"
        :model="search"
        size="mini"
        label-width="90px"
      >
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="seriesId" label="产品小类">
              <r-select
                v-model="search.seriesId"
                selectid="series_id"
                selectname="series_name"
                url="/productDisplay/getTmSeies"
                model="DMSCLOUD_VEHICLE"
                placeholder="请选择产品小类"
                filterable
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="status" label="有效状态">
              <r-select v-model="search.status" :formatter="filterCode" placeholder="类型" type="1001" clearable/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('modelGroup')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <div class="tableHead">
        <div class="title">车型展示维护</div>
        <el-button type="text" icon="el-icon-plus" @click="add">新增</el-button>
      </div>
      <BaseTable ref="searchTable" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column align="center" fixed label="序号" width="50" type="index"/>
        <el-table-column align="center" label="操作" fixed width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" content="修改" placement="bottom">
              <el-button
                icon="el-icon-edit-outline"
                size="mini"
                type="text"
                style="font-size: 20px;"
                @click="edit(scope.row)"/>

            </el-tooltip>
            <el-tooltip class="item" content="查看" placement="bottom">
              <el-button
                icon="el-icon-view"
                size="mini"
                type="text"
                style="font-size: 20px;"
                @click="view(scope.row)"/>

            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="series_name" label="产品小类" min-width="150" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="context_status" label="有效状态" type="1001" min-width="140" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="conf_cover" label="是否维护封面" type="1004" min-width="140" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="conf_apperation" label="是否维护外观" type="1004" min-width="140" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="conf_inner" label="是否维护内部图" type="1004" min-width="140" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="conf_exhibition" label="是否维护展图" type="1004" min-width="140" sortable/>
        <el-table-column :formatter="filterCode" align="center" prop="conf_config" label="是否维护了配置图" type="1004" min-width="160" sortable/>

        <!-- <el-table-column :formatter="filterCode" align="center" prop="context_type" label="类型" type="9250" min-width="140" sortable/> -->
        <!-- <el-table-column align="center" prop="file_name" label="类型图" min-width="150" sortable/> -->
      </BaseTable>
    </div>
    <div v-if="showAdd">
      <addMgDialog ref="addDiaForm" :show-add.sync="showAdd" :title="addTitle" />
    </div>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import BaseDialog from '@/components/BaseDialog'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import addMgDialog from './addMgDialog'
import { queryProductDisplayInfo } from '@/api/vehicle/productDisplay.js'
export default {
  name: 'ModelDisplayMaintenance',
  // 注册资源
  components: {
    BaseTable,
    Pagination,
    BaseDialog,
    rSelect,
    filtercode,
    addMgDialog
  },
  mixins: [formMixins],
  // 定义数据
  data() {
    return {
      visible: false,
      loading: false,
      showAdd: false,
      addTitle: '',
      rowsData: {},
      exportLoading: false,
      search: {
        limit: 10,
        pageNum: 1,
        seriesId: '',
        contextType: '',
        status: 10011001
      }
    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap', 'userInfo'])
  },
  // 初始化
  mounted() {
    this.searchHandle()
  },
  // 定义方法或事件
  methods: {
    // 搜索按钮点击事件
    searchHandle() {
      this.showAdd = false
      const table = this.$refs['searchTable']
      table.wait()
      queryProductDisplayInfo(this.search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 新增按钮点击事件
    add() {
      this.showAdd = true
      this.addTitle = '车型展示维护-新增'
      this.$nextTick(() => {
        this.$refs['addDiaForm'].initAddInfo()
      })
    },
    // 修改按钮点击事件
    edit(row) {
      this.showAdd = true
      this.addTitle = '车型展示维护-编辑'
      this.$nextTick(() => {
        this.$refs['addDiaForm'].initeditInfo(row)
      })
    },

    // 修改按钮点击事件
    view(row) {
      this.showAdd = true
      this.addTitle = '车型展示维护-查看'
      this.$nextTick(() => {
        this.$refs['addDiaForm'].initDetailInfo(row)
      })
    },
    resetForm() {
      this.search.seriesId = ''
      this.search.contextType = ''
      this.search.status = ''
      this.searchHandle()
    }
  }
}
</script>
<style scoped>
  .advance-wrapper {
    padding: 10px 20px;
  }
</style>
